import { Component, ViewChild, NgZone, Input } from '@angular/core';
import { NavController, ModalController, AlertController, ViewController } from 'ionic-angular';
import * as $ from "jquery";
import { range } from 'rxjs/observable/range';
import { map, filter, scan } from 'rxjs/operators';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild("header") header;
  message: any = "12345";
  opacity: any;
  // @Input() virtualScroll: any = [];
  items: any;
  srcs: "01dc0558ad38e6a801219c772b5fa8.jpg"
  has_next: boolean = true;
  public _date: any;
  constructor(
    public navCtrl: NavController,
    public modalCtrl: ModalController,
    public alertCtrl: AlertController,
    public viewCtrl: ViewController,
    public zone: NgZone,
  ) {
    this._date = 1529904186 * 1000;
    this.viewCtrl.didEnter.subscribe(() => {
      if (this.opacity) {
        setTimeout(() => {
          $("#home_title").css("opacity", this.opacity);
        }, 0)
      }
    })
    this.items = [
      {
        avatarUrl: "http://img.zcool.cn/community/01dc0558ad38e6a801219c772b5fa8.jpg",
        firstName: "1",
        lastName: "2"
      },
      {
        avatarUrl: "http://img.zcool.cn/community/01dc0558ad38e6a801219c772b5fa8.jpg",
        firstName: "1",
        lastName: "2"
      },
      {
        avatarUrl: "http://img.zcool.cn/community/01dc0558ad38e6a801219c772b5fa8.jpg",
        firstName: "1",
        lastName: "2"
      },
      {
        avatarUrl: "http://img.zcool.cn/community/01dc0558ad38e6a801219c772b5fa8.jpg",
        firstName: "1",
        lastName: "2"
      },
      {
        avatarUrl: "http://img.zcool.cn/community/01dc0558ad38e6a801219c772b5fa8.jpg",
        firstName: "1",
        lastName: "2"
      },
    ]
  }

  // 滚动条的监听
  scrollEvent(e) {
    this.zone.run(() => {
      let scroll_tag = e.scrollTop;
      if (scroll_tag >= 20) {
        if (scroll_tag <= 90) {
          let opacity = Math.abs((scroll_tag) / 90);
          this.header._elementRef.nativeElement.style.background = 'rgba(249, 128, 0, ' + opacity + ')';
          $("#home_title").css("opacity", opacity);
          this.opacity = opacity;
        } else {
          this.header._elementRef.nativeElement.style.background = 'rgba(249, 128, 0,  ' + 1 + ')';
          $("#home_title").css("opacity", 1);
          this.opacity = 1;
        }
      } else {
        this.header._elementRef.nativeElement.style.background = 'rgba(249, 128, 0,  ' + 0 + ')';
        $("#home_title").css("opacity", 0);
        this.opacity = 0;
      }
    })
  }
  doInfinite(infiniteScroll) {
    console.log('111');

  }
  ionViewDidLoad() {
    const source$ = range(0, 10);
    source$.pipe(
      filter(x => x % 2 === 0),
      map(x => x + x),
      scan((acc, x) => acc + x, 0)
    ).subscribe(x => console.log(x))
  }
}
